import { ContextualMenu, Image, FontWeights, getTheme, IButtonStyles, IDragOptions, IIconProps, IStackProps, IStackStyles, mergeStyleSets, MessageBar, MessageBarType, Modal, PrimaryButton, Stack, TextField, IImageStyles, IStyleFunctionOrObject, IImageStyleProps, IStackTokens } from "@fluentui/react";
import { useBoolean } from "@fluentui/react-hooks";
import { PhoneIcon, LocationIcon } from "@fluentui/react-icons-mdl2";
import { message } from "antd";
import React, { useId, useState } from "react";
import { useNavigate } from "react-router-dom";
import Alymodel from "../../mysql_interface/model";
import { asynclogin } from '../api/api'
import { Iroot } from "../interface";



interface IExampleProps {
    resetChoice?: () => void;
}

const theme = getTheme();
const contentStyles = mergeStyleSets({
    container: {
        display: 'flex',
        flexFlow: 'column nowrap',
        alignItems: 'stretch',
        width: '400px'
    },
    header: [
        // eslint-disable-next-line deprecation/deprecation
        theme.fonts.large,
        {
            flex: '1 1 auto',
            borderTop: `4px solid ${theme.palette.themePrimary}`,
            display: 'flex',
            alignItems: 'center',
            fontWeight: FontWeights.semibold,
            padding: '12px 12px 14px 24px',
            textAlign: 'left',
            fontSize: '24px',
            fontFamily: 'MicrosoftYaHei',
            fontStretch: 'normal',
            letterSpacing: '0',
            color: '#666'
        },
    ],
    heading: {
        color: theme.palette.neutralPrimary,
        fontWeight: FontWeights.semibold,
        fontSize: 'inherit',
        margin: '0',
    },
    body: {
        padding: '25px 25px 30px',
        selectors: {
            header: { marginBottom: '32px' },
        },
    },
});



const stackStyles: Partial<IStackStyles> = { root: { width: '100%', backgroundColor: '#fafafa' } };

const DefaultButtonStyles: IButtonStyles = {
    root: {
        textAlign: 'center',
        display: 'block',
        width: '100%',
    }
}

const nameicon: IIconProps = {
    iconName: 'ContactIcon'
}
const passicon: IIconProps = {
    iconName: 'EncryptionIcon'
}

const astyle = {
    color: '#7d7e7e',
    textDecoration: 'none'
}

const imagestyle: IStyleFunctionOrObject<IImageStyleProps, IImageStyles> = {
    root: {
        minWidth: '1200px',
        width: '100%'
    },
    image: {
        width: '100%'
    }
}

const numericalSpacingStackTokens: IStackTokens = {
    childrenGap: 2,
    padding: 20,
};

const botStyle = mergeStyleSets({
    rowStyles: {
        minHeight: '297px',
        backgroundColor: '#fafafa',
        paddingTop: '40px',
        paddingBottom: '30px',
        width: '1140px',
        margin: '0 auto'
    },
    colStyles: {
        flexBasis: 0,
        flexGrow: 1,
        maxWidth: '100%',
        position: 'relative',
        selectors: {
            h4: {
                color: '#595959'
            },
            hr: {
                marginTop: '1rem',
                marginBottom: '1rem',
                border: 0,
                borderTop: '1px solid rgba(0,0,0,.1)'
            }
        }

    },
    phone: {
        fontWeight: '290',
        fontSize: '1rem',
        marginBottom: '16px',
        lineHeight: '24px',
        color: '#595959',
        display: 'flex',
        selectors: {
            b: {
                marginLeft: '12px',
                transform: 'translateY(-5px)'
            }

        }
    },
    nt: {
        color: '#595959',
        marginTop: '5px',
        marginBottom: '5px',
        textDecoration: 'none',
        display: 'inline-block',
        fontSize: '1rem',
        marginRight: '40px'
    }
})



function Login(p: { isModalOpen: boolean, hideModal: () => void, setuser: React.Dispatch<React.SetStateAction<Alymodel.IMuser | undefined>> }) {
    let navigate = useNavigate();
    const [loginID, setname] = useState('')

    const [password, setpassword] = useState('')
    async function _alertClicked() {
        asynclogin({ loginID, password, phonenumber: loginID })
            .then(e => {
                p.setuser(e)
                navigate('/')
            }).catch(e => {
                message.error(e)
            })
    }
    const onChangename = React.useCallback(
        (event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) => {
            setname(newValue || '');
        },
        [],
    );


    const onChangepassword = React.useCallback(
        (event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) => {
            setpassword(newValue || '');
        },
        [],
    );
    const titleId = useId();
    const [isDraggable] = useBoolean(false);
    const [keepInBounds] = useBoolean(false);
    // Normally the drag options would be in a constant, but here the toggle can modify keepInBounds
    const dragOptions = React.useMemo(
        (): IDragOptions => ({
            moveMenuItemText: 'Move',
            closeMenuItemText: 'Close',
            menu: ContextualMenu,
            keepInBounds,
            dragHandleSelector: '.ms-Modal-scrollableContent > div:first-child',
        }),
        [keepInBounds],
    );
    return (
        <>
            <Stack styles={stackStyles}>
                <Image styles={imagestyle} src="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/guanwang/guanwang_tupian/Banner_1.png" alt="..." />
                <Image styles={imagestyle} src="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/guanwang/guanwang_tupian/P2_v3.png" alt="..." />
                <Image styles={imagestyle} src="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/guanwang/guanwang_tupian/P3_v3.png" alt="..." />
                <Image styles={imagestyle} src="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/guanwang/guanwang_tupian/P4_v3.png" alt="..." />
                <Image styles={imagestyle} src="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/guanwang/guanwang_tupian/P6_v3.png" alt="..." />
                <Stack enableScopedSelectors horizontal className={botStyle.rowStyles} tokens={numericalSpacingStackTokens}>
                    <Stack className={botStyle.colStyles}>
                        <h4>联系我们</h4>
                        <hr />
                        <div className={botStyle.phone}><PhoneIcon></PhoneIcon> <b  >010-8648-3029</b></div>
                        <div className={botStyle.phone}><LocationIcon></LocationIcon> <b>北京东城区景山街道大取灯胡同2号</b> </div>
                    </Stack>
                    <Stack className={botStyle.colStyles}>
                        <h4>相关链接</h4>
                        <hr />
                        <div>
                            <a href="http://www.hit.edu.cn/" target="_blank" className={botStyle.nt}>
                                哈尔滨工业大学
                            </a>
                            <a className={botStyle.nt} href="https://www.noi.cn/" target="_blank">
                                NOI全国青少年信息学奥林匹克竞赛
                            </a>
                        </div>
                        <div>
                            <a className={botStyle.nt} href="https://oj.hterobot.com/" target="_blank">训练题库</a>
                        </div>
                    </Stack>
                </Stack>
                <div className="machine"><span>北京哈工科教机器人科技有限公司版权所有 | Copyright©2017-2025
                    HteRobot
                    All Rights Reserved</span><a target="_blank" href="https://beian.miit.gov.cn/">京ICP备17067728号-1</a>&nbsp;
                    <a target="_blank"
                        href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010602040112">京公网安备11010602040112号</a>&nbsp;
                    <img width="14"
                        src="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/vue/public/huizhang.png" ></img>
                </div>
            </Stack>
            <Modal
                titleAriaId={titleId}
                isOpen={p.isModalOpen}
                onDismiss={p.hideModal}
                isBlocking={false}
                containerClassName={contentStyles.container}
                dragOptions={isDraggable ? dragOptions : undefined}
            >

                <div className={contentStyles.header} >哈工科教云课堂</div>
                <div className={contentStyles.body}>
                    <header>
                        <TextField
                            iconProps={nameicon}
                            canRevealPassword
                            revealPasswordAriaLabel="Show password"
                            onChange={onChangename}
                            placeholder='账号/手机号'
                        />
                    </header>
                    <header>
                        <TextField
                            iconProps={passicon}
                            placeholder="密码"
                            type="password"
                            canRevealPassword
                            revealPasswordAriaLabel="Show password"
                            onChange={onChangepassword}
                        />
                    </header>
                    <header>
                        <PrimaryButton text="提交" styles={DefaultButtonStyles} onClick={_alertClicked} allowDisabledFocus />
                    </header>
                    <Stack horizontal >
                        <Stack.Item>
                            <a href="/api/wechat/pc/login" style={astyle} >微信登录</a>
                        </Stack.Item>
                        <Stack.Item>

                        </Stack.Item>

                    </Stack>
                </div>

            </Modal>
        </>

    )
}

export default Login